<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用填充</title>
    <style>
        *{
            margin: 0;
        }
        fieldset{
            border: 1px solid #ccc;
            width: 46%;
            min-width: 200px;
            display: inline-block;
            vertical-align: top;
            margin-bottom: 15px;
        }
        .field-box{
            height:200px;
            overflow: auto;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/JsTpl.js"></script>
</head>
<body>
<fieldset>
    <legend>标准字符串类</legend>
    <div class="field-box">
        <pre>
            数据
            json:
            {
                title:'标题',
                name:'iyoole',
                sex:'男',
                age:'29',
                like:'胡思乱想'
            }
        </pre>
        <xmp>
            模版
            <dl>
                <dt>标题：{{title}}</dt>
                <dd>姓名：{{name}}</dd>
                <dd>姓别：{{sex}}</dd>
                <dd>年龄：{{age}}</dd>
                <dd>爱好：{{like}}</dd>
            </dl>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo1"></pre>
    </div>
</fieldset>

<fieldset>
    <legend>不同级别</legend>
    <div class="field-box">
        <pre>
            json:
            {
                title:'标题',
                name:'iyoole',
                other:
                {
                    sex:'男',
                    age:'29'
                },
                like:'胡思乱想'
            }
        </pre>
        <xmp>
            <dl>
                <dt>标题：{{title}}</dt>
                <dd>姓名：{{name}}</dd>
                <dd>姓别：{{other.sex}}</dd>
                <dd>年龄：{{other.age}}</dd>
                <dd>爱好：{{like}}</dd>
            </dl>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo2"></pre>
    </div>
</fieldset>

<fieldset>
    <legend>或者选择</legend>
    <div class="field-box">
        <pre>
            json:
            {
                title:'标题',
                name:'飞飞',
                sex:'男',
                age:'29',
                like:'胡思乱想',
                remark:''
            }
        </pre>
        <xmp>
            <dl>
                <dt>标题：{{title}}</dt>
                <dd>昵称：{{remark|name}}</dd>
                <dd>姓别：{{sex}}</dd>
                <dd>年龄：{{age}}</dd>
                <dd>爱好：{{like}}</dd>
            </dl>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo3"></pre>
    </div>
</fieldset>

<fieldset>
    <legend>带有方法</legend>
    <div class="field-box">
        <pre>
            json:
            {
                title:'标题',
                name:'iyoole',
                sex:1,
                age:'29',
                like:'胡思乱想'
            }
        </pre>
        <xmp>
            <dl>
                <dt>标题：{{title}}</dt>
                <dd>姓名：{{name}}</dd>
                <dd>姓别：{{sex@sex}}</dd>
                <dd>年份：{{age@myAge}}</dd>
                <dd>爱好：{{like}}</dd>
            </dl>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo4"></pre>
    </div>
</fieldset>

<fieldset>
    <legend>非正常字符</legend>
    <div class="field-box">
        <pre>
            json:
            {
                title:'特殊字符',
                isNull:null,
                isFalse:false,
                isTrue:true,
                isNum0:0,
                isUndefined:undefined
            }
        </pre>
        <xmp>
            <dl>
                <dt>标题：{{title}}</dt>
                <dd>返回null：{{isNull}}</dd>
                <dd>返回false：{{isFalse}}</dd>
                <dd>返回true：{{isTrue}}</dd>
                <dd>返回0：{{isNum0}}</dd>
                <dd>返回undefined:{{isUndefined}}</dd>
                <dd>返回空：{{isNone}}</dd>
            </dl>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo5"></pre>
    </div>
</fieldset>

<script type="text/template" id="demo1">
    <dl>
        <dt>标题：{{title}}</dt>
        <dd>姓名：{{name}}</dd>
        <dd>姓别：{{sex}}</dd>
        <dd>年龄：{{age}}</dd>
        <dd>爱好：{{like}}</dd>
    </dl>
</script>
<script type="text/template" id="demo2">
    <dl>
        <dt>标题：{{title}}</dt>
        <dd>姓名：{{name}}</dd>
        <dd>姓别：{{other.sex}}</dd>
        <dd>年龄：{{other.age}}</dd>
        <dd>爱好：{{like}}</dd>
    </dl>
</script>
<script type="text/template" id="demo3">
    <dl>
        <dt>标题：{{title}}</dt>
        <dd>昵称：{{remark|name}}</dd>
        <dd>姓别：{{sex}}</dd>
        <dd>年龄：{{age}}</dd>
        <dd>爱好：{{like}}</dd>
    </dl>
</script>
<script type="text/template" id="demo4">
    <dl>
        <dt>标题：{{title}}</dt>
        <dd>姓名：{{name}}</dd>
        <dd>姓别：{{sex@sex}}</dd>
        <dd>年份：{{age@myAge}}</dd>
        <dd>爱好：{{like}}</dd>
    </dl>
</script>
<script type="text/template" id="demo5">
    <dl>
        <dt>标题：{{title}}</dt>
        <dd>返回null：{{isNull}}</dd>
        <dd>返回false：{{isFalse}}</dd>
        <dd>返回true：{{isTrue}}</dd>
        <dd>返回0：{{isNum0}}</dd>
        <dd>返回undefined:{{isUndefined}}</dd>
        <dd>返回空：{{isNone}}</dd>
    </dl>
</script>
<script>
    //示例1
    var json1={
        title:'标题',
        name:'iyoole',
        sex:'男',
        age:'29',
        like:'胡思乱想'
    };
    JsTpl('.demo1').render(json1,'demo1');
    //示例2
    var json2={
        title:'标题',
        name:'iyoole',
        other:{
            sex:'男',
            age:'29'
        },
        like:'胡思乱想'
    };
    JsTpl('.demo2').render(json2,'demo2');
    //示例3
    var json3={
        title:'标题',
        name:'飞飞',
        sex:'男',
        age:'29',
        like:'胡思乱想',
        remark:''
    };
    JsTpl('.demo3').render(json3,'demo3');
    //示例4
    var json4={
        title:'标题',
        name:'iyoole',
        sex:1,
        age:'29',
        like:'胡思乱想'
    };
    JsTpl('.demo4').render(json4,'demo4');
    function myAge(age){
        return 2017 - age
    }
    //示例5
    var json5={
            title:'特殊字符',
            isNull:null,
            isFalse:false,
            isTrue:true,
            isNum0:0,
            isUndefined:undefined,
            isNone:''
        };
    JsTpl('.demo5').render(json5,'demo5');
</script>

</body>
</html>
